<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div class="header">
            <div class="title">年底履职分类统计</div>
            <DeptList v-model="deptId" @change="changeDeptHandle"/>
        </div>
        <div class="body" ref="bodyRef">
            <VChart ref="chartRef" :option="mapOptions" :style="{ height: height }"/>
        </div>
    </BoxBorder13>
</template>

<script setup>
import {BoxBorder13} from "guodu-data-panel";
import VChart from "vue-echarts";
import {useTemplateRef} from "vue";
import {use} from "echarts";
import {LegendComponent, TooltipComponent} from "echarts/components";
import {PieChart, RadarChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {LabelLayout} from "echarts/features";
import DeptList from "@/views/CenterController/components/DepList.vue";
import {getSendPoliceBarOfThird} from "@/api/StatisticAnalysis/CityResumptionChart.js";
import dayjs from "dayjs";

const deptId = ref(0);

const bodyRef = useTemplateRef('bodyRef')
const height = ref('')
const mapOptions = ref({})

use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout,
    RadarChart
]);

const xxx = [
    "#3fb1e3",
    "#6be6c1",
    "#626c91",
    "#a0a7e6",
    "#c4ebad",
    "#96dee8"
];

let intervalId;
onMounted(() => {
    nextTick(() => {
        height.value = bodyRef.value.clientHeight
    });
    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})

const getData = async () => {
    const currentYear = await getSendPoliceBarOfThird({
        unitId: deptId.value,
        endYear: dayjs().format('YYYY-MM-DD'),
        isUnit: true,
        res: 0
    })
    if (currentYear.data.length > 0) {
        const indicator = currentYear.data.map(item => {
            return {
                name: item.taskname,
                max: currentYear.data.reduce((arr, curr) => {
                    arr += curr.counts
                    return arr;
                }, 0)
            }
        })
        const data = currentYear.data.map(item => item.counts)
        setChartOptions(indicator, data)
    } else {
        setChartOptions([{name: '', max: 0}], [0])
    }
    // const lastYear = await getSendPoliceBarOfThird({
    //     unitId: deptId.value,
    //     endYear: dayjs().subtract(1, 'year').format('YYYY-MM-DD'),
    //     isUnit: true,
    //     res: 0
    // })
}
const changeDeptHandle = () => {
    getData()
}

const setChartOptions = (indicator, data) => {
    mapOptions.value = {
        // grid: {
        //     left: 0,
        //     right: 0,
        //     top: 0,
        //     bottom: 20,
        //     // containLabel: true
        // },

        tooltip: {
            trigger: 'item'
        },
        radar: {
            shape: 'circle',
            indicator: indicator
        },
        series: [
            {
                name: '年度履职分类统计',
                type: 'radar',
                shape: 'circle',
                data: [
                    {
                        value: data,
                        name: dayjs().format('YYYY') + '年度'
                    },
                    // {
                    //     value: [
                    //         randomNumberInRange(50, 200),
                    //         randomNumberInRange(50, 200),
                    //         randomNumberInRange(50, 200),
                    //         randomNumberInRange(50, 200),
                    //         randomNumberInRange(50, 200),
                    //         randomNumberInRange(50, 200)
                    //     ],
                    //     name: '2024年度'
                    // }
                ],
            }
        ]
    }
}
</script>

<style scoped lang="scss">

</style>